<!-- 分类 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="分类" :borderBottom="false"></u-navbar>
		<view class="top">
			<view class="search flex_align">
				<input type="text" confirm-type="search" placeholder="搜索"  v-model="key" @confirm="getSerch">
				<view class="iconfont icon-sousuo" @click="getSerch"></view>
			</view>
		</view>
		<view class="flex">
			<view class="left">
				<view class="sort sorts clamp1" v-for="(item,index) in list" :key="index" :class="index==cur?'cur':''" @click="chooseSort(index)">{{item.name}}</view>
				<view class="back"></view>
			</view>
			<view class="right">
				<view v-for="(item,index) in list" :key="index"><image class="topImg" v-show="index==cur&&item.image" :src="item.image" mode="widthFix"></image></view>
				<view v-for="(item,index) in twoList" :key="index">
					<view class="flex_bet_align sort" @click="goThereeType(item.id)">
						<view>{{item.name}}</view>
						<view class="iconfont icon-xwtubiaoku-03"></view>
					</view>
					<view class="grid">
						<view class="item" v-for="(items,index) in item.list" :key="index" @click="goThereeType(items.id)">
							<image class="img" :src="items.image"></image>
							<view class="title">{{items.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="white"></view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				list:[],
				twoList:[],
				names:'',
				key:'',
				cur:0,
			}
		},
		onLoad() {
			_this = this
			this.getType()
		},
		methods: {
			chooseSort(index){
				_this.twoList=_this.list[index].list
				_this.cur=index
			},
			// 获取分类
			getType() {
				_this.$api.get("getintegralcate", {}).then(data => {
					_this.list=data
					_this.twoList=_this.list[0].list
				});
			},
			// 跳转分类列表
			goThereeType(id){
				uni.navigateTo({
					url:'/personal/searchResult?id='+id
				})
			},
			// 搜索
			getSerch() {
				uni.navigateTo({
					url:'/personal/searchResult?key='+_this.key
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F2F2F2;
		font-family: PingFang SC;
	}
	.top{
		background-color: #FFFFFF;
		padding:27rpx 30rpx;
		margin-bottom: 12rpx;
		.search{
			width: 690rpx;
			height: 60rpx;
			margin:0 auto;
			background: #ffffff;
			border: 1rpx solid #999999;
			border-radius: 31rpx;
			padding-left:44rpx;
			input{
				flex:1;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}
			.iconfont{
				width: 110rpx;
				height: 60rpx;
				font-size: 40rpx;
				color:#FFFFFF;
				text-align: center;
				line-height: 60rpx;
				border-radius: 0 31rpx 31rpx 0;
				background: linear-gradient(96deg,#37be8e 5%, #06adb9 96%);
			}
		}
	}
	.left{
		width: 176rpx;
		background: #f2f2f2;
		position: relative;
		.sort{
			width: 176rpx;
			height: 110rpx;
			text-align: center;
			line-height: 110rpx;
			
		}
		.back{
			width: 176rpx;
			min-height: 80vh;
			background-color: #f2f2f2;
			position: absolute;
			top:0;
			left:0;
			z-index: -1;
		}
		.cur{
			background-color: #FFFFFF;
			border-radius: 16rpx 0 0 16rpx;
		}
	}
	.right{
		width: 574rpx;
		padding: 14rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		.topImg{
			width: 514rpx;
			// height: 180rpx;
			border-radius: 8rpx;
			background-color: #EEEEEE;
		}
		.sort{
			padding:30rpx 0 30rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #333333;
			.iconfont{
				color:#999999;
			}
		}
		.grid{
			display: grid;
			grid-template-columns: repeat(3,33%);
			.item{
				margin-bottom: 20rpx;
				text-align: center;
				.img{
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					background-color: #EEEEEE;
				}
				.title{
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
	.white{
		width: 574rpx;
		height:100vh;
		position: fixed;
		bottom:0;
		right:0;
		z-index: -1;
		background-color: #FFFFFF;
	}
	.sorts{
		// background: #f2f2f2;
	}
</style>
